import React from 'react';
import './index.scss';
import { Button, ScratchCard } from 'rmc-kiana-mei';
import { DemoBlock } from 'rmc-kiana-mei/src/demos';

class ScratchCardPage extends React.Component<any, any> {
  contentRef1: React.RefObject<any>;
  contentRef2: React.RefObject<any>;

  constructor(props: any) {
    super(props);

    this.state = {
      data: [],
      value: 2,
      prizeBoxFlag: false,
    };

    this.contentRef1 = React.createRef<any>();
    this.contentRef2 = React.createRef<any>();
  }

  getResetStyle = () => ``;

  loadRequest = async () =>
    await new Promise<any>((resolve, reject) => {
      // Notify.loading('出奖中...', 0)
      setTimeout(() => {
        // Notify.hide()
        resolve({
          img: './imgs/btn_lottery.jpg',
        });
        this.setState({ prizeBoxFlag: true });
      }, 1000);
    });

  render() {
    return (
      <DemoBlock title="刮刮乐">
        <style dangerouslySetInnerHTML={{ __html: this.getResetStyle() }} />
        <div
          className="phone_prizeWheel"
          style={{ padding: '7vw 5vw 10vw', background: '#fff' }}
        >
          <ScratchCard
            ref={this.contentRef1}
            async
            // style={{top: '70vw', position: 'absolute'}}
            hideImg={
              <img
                src={require('../../../assets/images/prize_not_open.jpg')}
                alt=""
              />
            }
            openingImg={
              <img src={require('../../../assets/images/opening.png')} alt="" />
            }
            loadRequest={this.loadRequest}
          />
          <ScratchCard
            style={{ marginTop: '3vw' }}
            ref={this.contentRef2}
            hideImg={
              <img
                src={require('../../../assets/images/prize_not_open.jpg')}
                alt=""
              />
            }
            prizeImg={
              <img
                src={require('../../../assets/images/btn_lottery.jpg')}
                alt=""
              />
            }
            successFun={() => this.setState({ prizeBoxFlag: true })}
          />
          <Button
            onClick={() => {
              this.contentRef1.current.reset();
              this.contentRef2.current.reset();
            }}
            type="primary"
            style={{ margin: '7vw auto 0' }}
          >
            重置
          </Button>
          {/* <Dialog
                            onClose={() => this.setState({prizeBoxFlag: false})}
                            visible={this.state.prizeBoxFlag}
                        >
                            <img style={{width: '100%'}} src={require('../../images/tickets.png')}/>
                        </Dialog> */}
        </div>
      </DemoBlock>
    );
  }
}

export default ScratchCardPage;
